import fs from 'fs'
import path from 'path'
import * as vscode from 'vscode';

const getActiveTextUrl = () => {
	let url = "";
	const editor = vscode.window.activeTextEditor;
	if (editor) {
		url = editor.document.fileName;
	}
	return url;
}


// 创建并显示新的 webview
const opedWebview = (content: string) => {
	const panel = vscode.window.createWebviewPanel(
		"SVGPreview", // 只供内部使用，即 webview 的标识
		"SVG Preview", // 面板标题
		vscode.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
		// Webview 选项
		{
			// Enable scripts in the webview
			enableScripts: true
		} 
	);
	// 设置HTML内容
	panel.webview.html = getWebviewContent(content);
	// Handle messages from the webview
	panel.webview.onDidReceiveMessage(
		message => {
			switch (message.command) {
				case 'copy-file-name':
					vscode.env.clipboard.writeText(message.text);
					vscode.window.showInformationMessage('复制成功：' + message.text)
					return;
				}
		}
	);
}
// 渲染模版
const getWebviewContent = (content: string) => {
	return `<!DOCTYPE html>
		<html lang="en">
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>SVG Preview</title>
			<style>
				html,
				body {
					width: 1920px;
					height: 1080px;
				}
				body {
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.svg-box{
					width: 1920px;
					height: 1080px;
					display: flex;
					flex-wrap: wrap;
				}
				.svg-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					z-index: 9
				}
				.icon-main{
					width: 128px;
					height: 128px;
				}
				.icon-name{
					font-size: 12px;
				}
				svg {
					width: 100%;
					height: 100%;
					background: #1f1f1f !important;
				}
			</style>
			</head>
			<script>
				const vscode = acquireVsCodeApi();
				const handle = (name) => {
					console.log('name', name)
					vscode.postMessage({
						command: 'copy-file-name',
						text: name
					})
				}
			</script>
			<body>
				<div class="svg-box">${content}</div>
			</body>
		</html>
	`;
}

const findTextFiles = (uri: string) => {
	const result: any = []
	const traverseFolder = (folderPath: string) => {
		// 读取文件夹列表
		const files = fs.readdirSync(folderPath)
		// 遍历文件夹列表
		files.forEach((fileName) => {
			// 拼接当前文件路径
			const filePath = path.join(folderPath, fileName)
			// 判断该路径是文件夹还是文件
			const stats = fs.statSync(filePath)
			if (stats.isDirectory()) {
				// 如果是文件夹，递归遍历
				traverseFolder(filePath)
			} else {
				// 如果是文件，执行操作
				if (path.extname(fileName) === '.svg') {
					const svgVlue = fs.readFileSync(filePath, "utf-8")
					const svgName = path.basename(fileName, '.svg');
					const template = `
					<div class="svg-item" title="${filePath}" onclick="handle('${svgName}')">
						<span class="icon-main">${svgVlue}</span>
						<span class="icon-name">${svgName}</span>
					</div>
					`
					result.push(template)
				}
			}
		})
	}
	traverseFolder(uri.substring(1))
	return result;
}
export const previewSvg = (uri: string) => {
	const content = findTextFiles(uri).join('');
	opedWebview(content);
}